<!--suppress CssRedundantUnit, JSUnresolvedVariable -->
<template>
  <div>
    <div style="margin-left: 40px;margin-top: 40px">
      <el-button @click="addArticle" type="success" size="small"  class="el-icon-circle-plus" style="margin-bottom: 10px;margin-right:5px">添加文章</el-button>
      <el-button @click="batchDelete" type="danger" size="small" class="el-icon-delete" style="margin-left:5px;margin-right:5px">批量删除</el-button>
      <el-button @click="batchChangeArticleState(1)" type="primary" size="small" class="el-icon-caret-top" style="margin-bottom: 10px;margin-right:5px">一键发布</el-button>
      <el-button @click="batchChangeArticleState(0)" type="warning" size="small" class="el-icon-caret-bottom" style="margin-bottom: 10px;margin-right: 5px">一键下架</el-button>
      <el-input
        placeholder="通过标题或摘要搜索文章"
        prefix-icon="el-icon-search"
        v-model="keywords" style="width:400px" size="small">
      </el-input>
      <el-button type="success" icon="el-icon-search" size="small" style="margin-left:3px" @click="searchClick">搜索
      </el-button>
      <el-button type="warning" icon="el-icon-back" size="small" style="margin-left:3px" @click="backClasses">分类
      </el-button>
    </div>

    <div style="margin-left: 30px;margin-top: 40px">
      <el-table
        ref="multipleTable"
        :data="articleList"
        tooltip-effect="dark"
        style="width: 100%;overflow-x: hidden; overflow-y: hidden"
        max-height="10000"
        @selection-change="handleSelectionChange" v-loading="listLoading">

        <el-table-column type="selection" width="35" align="left" v-if="articleList">
        </el-table-column>

        <el-table-column type="index" width="40" align="left" v-if="articleList">
        </el-table-column>

        <el-table-column label="标题" width="160" align="left">
          <template slot-scope="scope"><span style="color: #409eff;cursor: pointer" @click="itemClick(scope.row.id)"> {{ scope.row.title}}</span>
          </template>
        </el-table-column>

        <el-table-column label="摘要" width="230" align="left">
          <template slot-scope="scope"><span style="color: #409eff;cursor: pointer" @click="itemClick(scope.row.id)">{{ scope.row.summary}}</span>
          </template>
        </el-table-column>

        <el-table-column label="发布状态" width="100" align="center" sortable>
          <template slot-scope="scope">
<!--            {{ scope.row.state === 0 ? '未发布' : '已发布' }}-->
<!--            <br>-->
            <el-switch
              title="更改状态"
              v-model="scope.row.state.toString()"
              style="margin-top:15px"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeState(scope.row.id)"/>
          </template>
        </el-table-column>

        <el-table-column label="难度" width="80" align="center" sortable>
          <template slot-scope="scope">
            <h3 v-show="scope.row.difficulty===0" style="color: #00AF9B; font-size: 15px">
              简单
            </h3>
            <h3 v-show="scope.row.difficulty===1" style="color: #FFB800; font-size: 15px">
              中等
            </h3>
            <h3 v-show="scope.row.difficulty===2" style="color: #FF2D55; font-size: 15px">
              困难
            </h3>
          </template>
        </el-table-column>

        <el-table-column label="一级分类" prop="clsParentTitle" width="100" align="center" sortable>
        </el-table-column>

        <el-table-column label="二级分类" prop="clsTitle" width="100" align="center" sortable>
        </el-table-column>

        <el-table-column label="浏览量" prop="viewNum" width="100" align="center" sortable>
        </el-table-column>

        <el-table-column label="修改时间" prop="gmtModified" align="center" sortable>
        </el-table-column>

        <el-table-column label="创建时间" prop="gmtCreate" align="center" sortable>
        </el-table-column>

        <el-table-column label="操作" align="center" width="160" v-if="articleList.length>0">
          <template slot-scope="scope">

            <router-link :to="'/article/add/'+scope.row.id">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                title="编辑图片"></el-button>
            </router-link>

            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="removeArticle(scope.row.id)"
              title="删除图片"></el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <span></span>

<!--    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />-->

    <!-- 分页 -->
    <div style="height: 60px;width: 450px; margin: 10px auto" v-show="articleList.length>0">
      <el-pagination
        @current-change="getList"
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="limit"
        style="margin: 0 auto; position: center;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import articleApi from '@/api/article'

export default{

  data() {
    return {
      // 文章分类id
      articleClassesId: '',
      // 选择条目
      selectItems: [],
      selectIds: [],
      // 搜索关键字
      keywords: '',
      // 文章列表
      articleList: [],
      page: 1, // 当前页
      limit: 30, // 每页记录数
      total: 0,
      pageSizes: [30,60,90,9999], // 每页记录数

      // 分类
      articleClassesList: [],

      options: [{
        value: 0,
        label: 'easy'
      }, {
        value: 1,
        label: 'medium'
      }, {
        value: 2,
        label: 'hard'
      }]
    }
  },

  created() {
    if (this.$route.params && this.$route.params.id) {

      this.articleClassesId = this.$route.params.id
      console.log("============路由id=============")
      console.log(this.$route.params.id)
      // 调用根据分类id查询方法
      this.getArtilceListByClassesId(this.articleClassesId)
    } else {
      //获取默认列表
      this.getList()
    }
  },

  mounted() {
    // this.getList()
  },

  methods: {

    // 返回分类列表
    backClasses() {
      this.$router.push({ path: '/article/classes' })
    },

    // 根据分类查询数据
    getArtilceListByClassesId(articleClassesId) {
      console.log(articleClassesId)
      articleApi.getArtilceListByClassesId(articleClassesId)
        .then(response => {
            this.articleList = response.data.classResult
            this.total = this.articleList.length
            this.page = 1
            this.limit = 100000
        })
    },

    // 改变状态
    changeState(id) {
      this.$confirm('确定更改该文章状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除成功
        articleApi.changeState(id)
          .then(response => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '文章状态更改成功!'
            })
            // 刷新并回到当前页
            this.getList()
          })
      })
    },

    //单个删除
    removeArticle(id) {
      this.$confirm('确定删除该文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        articleApi.removeArticleById(id)
          .then(response => {
            this.$message({
              message: "删除成功",
              type: "success"
            })
            // 刷新并回到当前页
            this.getList()
          })
      })
    },

    //批量删除
    batchDelete() {
      if (this.selectItems.length===0) {
        this.$message({
          message: "请选择至少一篇文章删除",
          type: "warning"
        })
        return
      }
      this.$confirm('确定批量删除文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i = 0; i <this.selectItems.length; i++) {
          this.selectIds.push(this.selectItems[i].id)
        }
        articleApi.batchDelete(this.selectIds)
          .then(response => {
            this.$message({
              message: "删除成功",
              type: "success"
            })
            // 刷新并回到当前页
            this.getList()
        })
      })

    },

    // 文章列表
    getList(page = 1) {
      this.page = page // 分页修改参数
      articleApi.getPageArticle(this.page, this.limit)
        .then(response => {

          this.articleList = response.data.items
          this.total = response.data.total

          this.$notify({
            message: "查询到" + this.articleList.length + "篇文章",
            type: "success"
          })

          console.log("============获取文章列表============")
          console.log(this.articleList)
          console.log(this.total)
        })
    },

    //关键字搜索
    searchClick(){
      if (this.keywords === ""){
        this.limit = 10000
        this.page = 1
        console.log("=======搜索======")
        console.log(this.page)
        console.log(this.limit)
        this.getList()
      } else {
        articleApi.searchArticle(this.keywords)
          .then(response => {
            this.articleList = response.data.searchResult
            this.limit = this.articleList.length
            this.total = this.articleList.length
            this.page = 1;
            console.log("============搜索文章============")
            console.log(this.articleList)
          })
      }
    },

    //跳转添加文章
    addArticle() {
      this.$router.push({ path: '/article/add' })
    },

    //查看条目
    itemClick(articleId){
      console.log("=======点击条目=======")
      console.log(articleId)
      this.$router.push({path: '/article/show/'+articleId})
    },

    //多选
    handleSelectionChange(val) {
      this.selectItems = val
    },

    //一键发布
    batchChangeArticleState(state) {
      let upArticleNum = 0
      let downArticleNum = 0
      for (let i = 0; i < this.articleList.length; i++) {
        if (this.articleList[i].state===1) {
          upArticleNum++
        } else {
          downArticleNum++
        }
      }
      if (state===1) {
        if(downArticleNum===0) {
          this.$message({
            message: "当前无未上架文章！",
            type: "warning"
          })
          return
        }
        this.$confirm('当前有'+downArticleNum+'篇文章未上架，是否一键上架这'+downArticleNum+'篇文章？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          articleApi.batchChangeArticleState(state)
            .then(response => {
              this.$message({
                message: downArticleNum+"篇文章上架成功",
                type: "success"
              })
              this.getList()
            })
        })
      } else {
        if(upArticleNum===0) {
          this.$message({
            message: "当前无已上架文章！",
            type: "warning"
          })
          return
        }
        this.$confirm('当前有'+upArticleNum+'篇文章已上架，是否一键下架这'+upArticleNum+'篇文章？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          articleApi.batchChangeArticleState(state)
            .then(response => {
              this.$message({
                message: upArticleNum+"篇文章下架成功",
                type: "success"
              })
              this.getList()
            })
        })
      }
    }
  },
  props: ['state', 'showEdit', 'showDelete', 'activeName', 'showRestore']
}
</script>

<style type="text/css">
.blog_table_footer {
  display: flex;
  box-sizing: content-box;
  padding-top: 10px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  justify-content: space-between;
}
</style>
